<template>
	<view class="pro_banner">
		<!-- 商品banner图 -->
		<view class="top_banner">
			<swiper class="swiper" indicator-active-color="#ffffff" indicator-color="rgba(255, 255, 255, .5)" @change="changeNum" :circular="true">
				<swiper-item v-for="(item,index) in productDetail.carousel" :key="index">
					<image class="pic" :src="item" mode="widthFix" @tap="previewImage(index)" :lazy-load="true"></image>
				</swiper-item>
			</swiper>
			<view class="pic_num">
				{{pic_current}}/{{banner_num}}
			</view>
		</view>
		<!-- 成团人数 倒计时 -->
		<view class="seckill_time">
			<view class="seckill_time_detail seckill_time_1">
				<view class="title_1"><text>￥</text> {{productDetail.price}}</view>
				<view class="title_2">￥{{productDetail.cost_price}}</view>
			</view>
			<view class="seckill_time_right">
				<view class=" seckill_time_2">
					<image :src="Url+'mine/index/group_fill.png'"></image>
					{{productDetail.num}}人成团
				</view>
				<view class="seckill_time_3">
					<uni-countdowns v-if="productDetail.skill_state != 2" :show-day="false" :hour="0" :minute="0" :second="productDetail.end_time"
					 background-color="" endSe="" color="#fff" splitorColor="#fff"></uni-countdowns>
					后结束
				</view>
			</view>
		</view>
		<!-- 商品简介 -->
		<view class="goods">
			<view class="">
				<view>{{productDetail.name}}</view>
				<view class="title2">{{productDetail.brief}}</view>
			</view>
			<view class="goods_right">已拼{{productDetail.invet_sales+productDetail.sales}}份</view>
		</view>
		<!-- 拼团火热进行中 -->
		<view class="groups" v-if="showGroup">
			<view class="groups_1">
				<view class="groups_1_left">拼团火热进行中</view>
				<view class="groups_1_right" @tap="toMoreGroup">
					更多<i class="icon">&#xe637;</i>
				</view>
			</view>
			<view class="grouplist" v-for="(item,index) in productDetail.collage" @tap="clustering(item)" v-if="index <2">
				<view class="grouplist_left">
					还差<text>{{item.last_num}}</text>人成团
				</view>
				<view class="grouplist_right">
					<view class="grouplist_btn">
						一起拼
					</view>
				</view>
			</view>
		</view>
		<!-- 拼团流程 -->
		<view class="groups_info">
			<view>拼团流程</view>
			<view class="groups_info_detail">
				<view class="groups_info_detail_01">
					<image :src="Url+'add_images/groups_02.png'"></image>
					<view class="">01-选择商品</view>
				</view>
				<view class="groups_info_detail_00">
					<image :src="Url+'add_images/groups_01.png'"></image>
				</view>
				<view class="groups_info_detail_01">
					<image :src="Url+'add_images/groups_03.png'"></image>
					<view class="">02-邀请好友</view>
				</view>
				<view class="groups_info_detail_00">
					<image :src="Url+'add_images/groups_01.png'"></image>
				</view>
				<view class="groups_info_detail_01">
					<image :src="Url+'add_images/groups_04.png'"></image>
					<view class="">03-人满成团</view>
				</view>
			</view>
		</view>
		<!-- 商品详情 -->
		<view class="goods_detail">
			<view class="goods_detail_1">商品详情</view>
			<view class="goods_detail_2" v-for="(item,index) in productDetail.sttr" :key="index">{{item.label}}：{{item.value}}</view>
			<!-- <view v-html="detail_pic"></view> -->
			<rich-text :nodes="detail_pic"></rich-text>
		</view>
		<!-- 底部按钮 -->
		<view class="bottom">
			<view class="bottom_left">
				<view class="customerService" @tap="toservice">
					<image :src="Url+'mine/index/customer_service.png'" mode="widthFix"></image>
					客服
				</view>
				<view class="relay" @tap="sharpro">
					<image :src="Url+'mine/index/share.png'" mode="widthFix"></image>
					分享
				</view>
			</view>
			<view class="bottom_right" v-if="productDetail.stock > 0" @tap="choosestandard">
				<text v-if="!user_assemble_id">立即开团</text>
				<text v-else>确认拼团</text>
			</view>
			<view class="bottom_right_end" v-else>
				暂无库存
			</view>
		</view>
		<!-- 选择规格 弹窗 -->
		<uni-popup ref="standard" type="bottom">
			<view class="standard_content">
				<i class="icon erricon" @tap="closestand">&#xe698;</i>
				<view class="product_info">
					<image class="pro_pic" :src="detailkutype.Stockpic ? detailkutype.Stockpic : productDetail.cover" mode="aspectFill" @tap="previewSizImage"></image>
					<view class="product_info_info" v-if="showSize">
						<view class="price">
							<text class="price_flag">￥</text>{{detailkutype.price}}<text class="price_line">￥{{productDetail.cost_price}}</text>
						</view>
						<view class="inventory">库存{{detailkutype.Stock ? detailkutype.Stock : 0}}件</view>
						<view class="tochoose" v-if="detailkutype.selectArr.length">已选择
							<text v-if="choose_size  != '请选择规格' && choose_size  != ','" >{{choose_size}}</text>
						</view>
						<view class="tochoose" v-else>请选择</view>
					</view>
					<view class="product_info_info" v-if="!showSize">
						<view class="price">
							<text class="price_flag">￥</text>{{productDetail.price}}<text class="price_line" v-if="productDetail.cost_price">￥{{productDetail.cost_price}}</text>
						</view>
						<view class="inventory">库存{{productDetail.stock}}件</view>
					</view>
				</view>
				<!-- 具体规格 -->
				<view v-if="detailSku.totalSize  !==undefined && detailSku.totalSize.length > 0 ">
					<view class="weight" v-for="(item,index) in detailSku.totalSize" :key="index">
						<view class="tilte">{{item.name}}</view>
						<view class="choose_weight_list">
							<view v-for="(it, n) in item.attr" :key="n" :data-n="n" :data-index="index" :data-sub="detailkutype.subIndex[index]"
							 :class="['product_weight', detailkutype.subIndex[index] === n ? 'product_weight_i' : '',it.isShow ? '' : 'product_weight_n']"
							 @tap="$emit('specificationBtn',it.val,index,$event,n,it.isShow)">
								{{it.val}}
							</view>
						</view>
					</view>
				</view>
				<view class="buy_num">
					<view class="title">
						购买数量<text v-if="productDetail.limit_num > 0">（每人限购{{productDetail.limit_num}}件）</text>
					</view>
					<view class="num">
						<image :src="Url+'add_images/sub_btn_01.png'" mode="" @tap="jian_buyNum"></image>
						<text>{{buy_num}}</text>
						<image :src="Url+'add_images/add_btn_01.png'" mode="" @tap="add_buyNum"></image>
					</view>
				</view>
				<view class="btn" @tap="confirmStand">
					<text v-if="!openflag || user_assemble_id">确认拼团</text>
					<text v-else>立即开团</text>
				</view>
			</view>
		</uni-popup>
		<!-- 分享 弹窗 -->
		<uni-popup ref="share" type="bottom">
			<view class="product_share">
				<i class="icon erricon" @tap="closestand">&#xe698;</i>
				<view class="product_share_title">分享至</view>
				<view class="product_share_way">
					<!-- #ifdef MP-WEIXIN -->
					<button class="product_share_way_item share-btn" open-type="share">
						<image :src="Url+'mine/index/wechat.png'" mode=""></image>
						<text>分享给好友</text>
					</button>
					<!-- #endif -->
					<!-- #ifdef H5 -->
					<view class="product_share_way_item" @tap="h5Share">
						<image :src="Url+'mine/index/wechat.png'" mode=""></image>
						<text>分享给好友</text>
					</view>
					<!-- #endif -->
					<!-- #ifdef APP-PLUS -->
					<view class="product_share_way_item" @tap="appShare">
						<image :src="Url+'mine/index/wechat.png'" mode=""></image>
						<text>分享给好友</text>
					</view>
					<!-- #endif -->
					<view class="product_share_way_item" @tap="sharebanner">
						<image :src="Url+'mine/index/friend.png'" mode=""></image>
						<text>生成分享图</text>
					</view>
				</view>
			</view>
		</uni-popup>
		<!-- 生成分享图片弹窗 -->
		<share-banner ref="sharebanner" :productId="productDetail.assemble_id" tag="2"></share-banner>
		<!-- 拼团 弹框 -->
		<uni-popup ref="groupbooking" type="bottom">
			<view class="team">
				<i class="icon erricon" @tap="closestand">&#xe698;</i>
				<view class="team_one">一起参与拼团</view>
				<view class="team_product_title">
					{{productDetail.name}}
				</view>
				<view class="team_count_down">
					结束倒计时： <uni-countdowns :show-day="false" :hour="0" :minute="0" :second="productDetail.end_time" background-color=""
					 endSe="" color="#000" splitorColor="#000" fontSize="32"></uni-countdowns>
				</view>
				<view class="team_user_header">
					<scroll-view :scroll-x="true" @scroll="scroll" class="scroll_pic">
						<view class="header_pic" v-for="(item,index) in currentGroup.user" :key="index">
							<image :src="item.avatar" mode="" v-if=" item.avatar != ''"></image>
							<image :src="Url+'mine/discount/header01.png'" mode="" v-if="item.picShow && item.avatar == ''"></image>
							<image :src="Url+'add_images/group_no.png'" mode="" v-if="!item.picShow"></image>
							<view class="colonel" v-if="index == 0 && item.picShow">团长</view>
						</view>
					</scroll-view>
				</view>
				<view class="ream_residue_num">还剩 {{currentGroup.last_num}} 个名额抓紧参加吧</view>
				<view class="makesure_group" v-if="productDetail.stock>0" @tap="makesureGroup">确认拼团</view>
				<view class="makesure_group_no" v-else>暂无库存</view>
			</view>
		</uni-popup>
		<!-- 更多拼团的弹窗 -->
		<uni-popup ref="moregrouplist" type="bottom">
			<view class="group_list">
				<i class="icon erricon" @tap="closestand">&#xe698;</i>
				<view class="list">
					<now-group @clustering="clustering" :groupList="groupList"></now-group>
				</view>
			</view>
		</uni-popup>
		<!-- 联系客服弹窗 -->
		<uni-customer ref='customer'></uni-customer>
		<share-model v-model="shareshow"></share-model>
	</view>
</template>

<script>
	import nowGroup from '@/components/nowgroup/nowgroup.vue'
	import scNo from '@/components/sc-no/sc-no.vue';
	import {
		collageDetail,
		collageList,
		collageTime,
		orderSubmit,
		share
	} from '@/common/productdetail.js';
	import shareModel from '@/components/shareModel/shareModel.vue';
	import uniCountdowns from '@/components/uni-countdown/uni-countdown2.vue'
	// #ifdef H5
	import wxsdk from '@/static/js/wechat.js';
	// #endif
	import {
		shareUrl
	} from '@/common/index.js';
	import uniCustomer from '@/components/customerService/customer_service.vue'
	import shareBanner from '@/components/sharebanner/sharebanner.vue'
	export default {
		components: {
			nowGroup,
			scNo,
			shareModel,
			uniCustomer,
			shareBanner,
			uniCountdowns
		},
		props: ['detailSku', 'productDetail', 'detail_pic', 'banner_num', 'detailkutype', 'showSize', 'user_assemble_id','choose_size'],
		data() {
			return {
				shareshow: false,
				Url: this.Imgurl,
				buy_num: 1,
				showGroup: false, //是否有拼团列表
				openflag: true, //是否自己开团
				currentGroup: {}, //选中的拼团
				currentGroupId: '',
				countdown: 0,
				groupList: [],
				pic_current: 1,
				standard: '请选择规格',
				sharePic: '',
			}
		},
		mounted() {
			if (this.productDetail.collage.length) {
				this.showGroup = true
			}
		},
		methods: {
			scroll() {},
			//预览轮播图
			previewImage: function(index) {
				var i = this.productDetail.carousel; //获取当前页面的轮播图数据
				//uniapp预览轮播图
				uni.previewImage({
					current: index, //预览图片的下标
					urls: i //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
				})
			},
			previewSizImage() {
				var i = this.detailkutype.Stockpic ? this.detailkutype.Stockpic : this.productDetail.cover; //获取当前页面的轮播图数据
				// console.log("触发", i)
				//uniapp预览轮播图
				uni.previewImage({
					urls: [i], //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
				})
			},
			//h5分享
			h5Share() {
				let that = this;
				// console.log(wxsdk.share)
				this.shareshow = true;
				const {
					productDetail
				} = this;
				shareUrl({
					id: productDetail.assemble_id,
					type: '3'
				}).then(res => {
					if (res.code == 1) {
						wxsdk.share({
								title: productDetail.name,
								path: res.msg,
								imageUrl: productDetail.cover,
								desc: productDetail.brief,
								url: 'https://shop.jyecloud.cn/h5/pageB/classify/productdetail?type=3&id=' + productDetail.assemble_id
							},
							res => {
								// console.log(res)
								that.shareshow = false;
								this.$refs.share.close();
								that.toast('分享成功');
							}
						);
					}
				}).catch()
			},
			//app分享
			appShare() {
				uni.share({
					provider: "weixin",
					scene: "WXSceneSession",
					type: 0,
					href: "https://shop.jyecloud.cn/phone/h5/pageB/classify/productdetail?type=3&id=" + this.productDetail.assemble_id,
					title: this.productDetail.name,
					summary: this.productDetail.brief,
					imageUrl: this.productDetail.cover,
					success: function(res) {
						// console.log("success:" + JSON.stringify(res));
					},
					fail: function(err) {
						// console.log("fail:" + JSON.stringify(err));
					}
				});
			},
			jian_buyNum() {
				if (this.buy_num > 1) {
					this.buy_num--
				}
			},
			add_buyNum() {
				let limit_num = this.productDetail.limit_num //限购数量
				let remaining = limit_num - this.productDetail.user_buy_num //限购数量 - 已买数量
				let stock = 0 //库存数量
				if (this.showSize) {
					stock = this.detailkutype.Stock
				} else {
					stock = this.productDetail.stock
				}
				if(limit_num > 0){//限购
					if(remaining > stock){
						if(this.buy_num < stock){
							this.buy_num ++;
						}else{
							this.toast("您购买的商品数量已达到商品库存数量")
						}
					}else{
						if(this.buy_num < remaining){
							this.buy_num ++;
						}else{
							this.toast("您购买的商品数量已达到商品限购数量")
						}
					}
				}else{//不限购
					if(this.buy_num < stock){
						this.buy_num++;
					}else{
						this.toast("您购买的商品数量已达到商品库存数量")
					}
				}
			},
			changeNum(e) {
				// console.log(e.detail)
				this.pic_current = e.detail.current + 1
			},
			// 查看更多拼团
			toMoreGroup() {
				collageList({
					assemble_id: this.productDetail.assemble_id
				}).then(res => {
					if (res.code == 1) {
						// console.log(res)
						this.groupList = res.msg
					}
				}).catch()
				this.$refs.moregrouplist.open()
			},
			// 参与拼团
			clustering(e) {
				this.$refs.moregrouplist.close()
				// console.log(e);
				this.currentGroup = e
				let user = JSON.parse(JSON.stringify(e.user));
				user.map(item => {
					if (typeof item.id == 'number') {
						item.picShow = true;
					} else {
						item.picShow = false;
					}
				})
				this.currentGroup.user = user;
				// console.log("后来", this.currentGroup)
				this.currentGroupId = e.id
				this.$refs.groupbooking.open()
			},
			//确认拼团
			makesureGroup() {
				this.openflag = false
				this.$refs.groupbooking.close();
				this.$refs.standard.open();
			},
			// 打开规格选择
			choosestandard() {
				this.openflag = true
				this.$refs.standard.open();
			},
			//点击分享
			sharpro() {
				this.$refs.share.open();
			},
			closestand() {
				this.$refs.standard.close();
				this.$refs.share.close();
				this.$refs.groupbooking.close();
				this.$refs.moregrouplist.close()
			},
			//生成分享图
			sharebanner() {
				this.$refs.share.close();
				this.$refs.sharebanner.show = true;
			},
			toNext(){
				this.$refs.standard.close();
				this.submitOrder()
			},
			// 确定提交订单
			confirmStand() {
				let limit_num = this.productDetail.limit_num //限购数量
				let remaining = limit_num - this.productDetail.user_buy_num //限购数量 - 已买数量
				let stock = 0 //库存数量
				if (this.showSize) {
					stock = this.detailkutype.Stock
				} else {
					stock = this.productDetail.stock
				}
				if(limit_num > 0){//限购
					if(remaining > stock){ //还剩的限购数量>库存
						if(this.buy_num > stock){
							// console.log("限购")
							this.toast("您购买此商品的数量已超过商品库存")
						}else{
							this.toNext()
						}
					}else{//还剩的限购数量<库存
						if(this.buy_num > remaining){
							this.toast("您的购买数量已超出商品限购数量")
						}else{
							this.toNext()
						}
					}
				}else{//不限购
					 if(this.buy_num > stock){
						 // console.log("不限购")
						this.toast("您购买此商品的数量已超过商品库存")
					}else{
						this.toNext()
					}
				}
			},
			submitOrder() {
				// console.log(this.detailkutype.selectArr)
				let group_assemble_id = ''
				if (this.openflag ) {
					group_assemble_id = this.user_assemble_id
				} else {
					group_assemble_id = this.currentGroupId
				}
				let params = {
					assemble_id: this.productDetail.assemble_id,
					user_assemble_id: group_assemble_id,
					goods_id: this.productDetail.id,
					num: this.buy_num,
					size: this.detailkutype.selectArr.toString(),
				}
				// console.log(params)
				orderSubmit(params).then(res => {
					// console.log(res)
					let pa = {
						type: 3,
						...params
					}
					let data = JSON.stringify(pa);
					if (res.code == 1) {
						uni.navigateTo({
							url: '/pageB/order/confirmorder?data=' + data
						});
					} else if (res.code == 4) {
						this.$emit('login')
					} else {
						this.toast(res.msg)
					}
				}).catch()
			},
			// 联系客服
			toservice() {
				this.$refs.customer.show = true;
			},
		}
	}
</script>

<style scoped lang="less">
	.top_banner {
		position: relative;
		width: 100%;
		height: 750upx;

		.pic_num {
			position: absolute;
			bottom: 20upx;
			right: 30upx;
			border: 2upx solid #999;
			padding: 4upx 16upx;
			font-size: 28upx;
			color: #fff;
			background: #2C2C2C;
			border-radius: 25upx;
			opacity: 0.4;
		}
	}

	.swiper {
		position: relative;
		width: 100%;
		height: 750upx;

		.pic {
			width: 100%;
			height: 100%;
		}
	}

	.seckill_time {
		height: 120upx;
		background: -webkit-linear-gradient(left, #FF2842 0%, #FF5E71 100%);
		padding: 0 30upx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.seckill_time_detail {
			color: #fff;
			font-size: 38upx;

		}

		.seckill_time_right {
			display: flex;
			flex-direction: column;
			align-items: flex-end;
		}

		.seckill_time_2 {
			font-size: 30upx;
			color: #fff;

			image {
				width: 28upx;
				height: 28upx;
				margin-right: 10upx;
				vertical-align: middle;
			}
		}

		.seckill_time_3 {
			display: flex;
			margin-top: 6upx;
			font-size: 26upx;
			color: #fff;
			align-items: center;
		}

		.title_2 {
			margin-top: 8upx;
			font-size: 24upx;
			text-decoration: line-through;
		}

		.time_text {
			font-size: 28upx;
		}
	}

	// 拼团火热进行中
	.groups {
		background: #fff;
		padding: 0 30upx;
		border-bottom: 20upx solid #F9F9F9;

		.groups_1 {
			padding: 10upx 0;
			display: flex;
			justify-content: space-between;
			font-size: 32upx;

			.groups_1_right {
				color: #999999;
				font-size: 30upx;
			}

			.icon {
				color: #999;
				font-size: 30upx;
			}
		}
	}

	.grouplist {
		width: 100%;
		height: 116upx;
		background-color: #FFFFFF;
		border-radius: 10upx;
		margin: auto;
		padding: 0 25upx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1px solid #f0f0f0;

		&:last-child {
			border: none;
		}

		.grouplist_member_header {
			height: 76upx;

			image {
				width: 76upx;
				height: 76upx;
				border-radius: 50%;
				margin-right: 10upx;
			}
		}

		.grouplist_residue {
			display: flex;
			align-items: center;

			.grouplist_residue_l_t {
				font-size: 24upx;
				color: #999999;
			}

			.grouplist_residue_l_b {
				text-align: center;
				font-size: 24upx;
				color: #333333;
				margin-top: 6upx;
			}

			.grouplist_residue_r {
				width: 148upx;
				height: 52upx;
				background: linear-gradient(to right, #f73f2f 0%, #FF2842 100%);
				border-radius: 26upx;
				font-size: 28upx;
				color: #FFFFFF;
				text-align: center;
				line-height: 52upx;
				box-shadow: 0 0 6upx 0 #FF2842;
				margin-left: 20upx;
			}
		}

		.grouplist_left {
			font-size: 28upx;
			color: #333;

			text {
				color: red;
				padding: 0 10upx;
			}
		}

		.grouplist_right {
			display: flex;
			align-items: center;
		}

		.grouplist_time {
			transform: scale(1.1);
		}

		.grouplist_btn {
			width: 148upx;
			height: 52upx;
			background: #FF4D53;
			border-radius: 26upx;
			font-size: 28upx;
			color: #FFFFFF;
			text-align: center;
			line-height: 52upx;
			margin-left: 20upx;
		}
	}

	.groups_info {
		background: #fff;
		padding: 10upx 30upx;
		border-bottom: 20upx solid #F9F9F9;
		font-size: 36upx;

		image {
			width: 60upx;
			height: 60upx;
		}

		.groups_info_detail {
			padding: 30upx 15upx;
			display: flex;
			justify-content: space-around;
		}

		.groups_info_detail_01 {
			display: flex;
			flex-direction: column;
			align-items: center;
			font-size: 28upx;

			image {
				margin-bottom: 10upx;
			}
		}

		.groups_info_detail_00 {
			image {
				width: 60upx;
				height: 30upx;
			}
		}
	}

	.goods {
		position: relative;
		background: #fff;
		padding: 30upx 30upx;
		border-bottom: 20upx solid #F9F9F9;
		font-size: 36upx;

		.title2 {
			margin-top: 10upx;
			font-size: 30upx;
			color: #999;
			width: 80%;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		.goods_price {
			margin-top: 10upx;
			color: red;
			font-size: 26upx;

			text {
				font-size: 32upx;
				font-weight: 700;
			}
		}

		.goods_right {
			position: absolute;
			right: 30upx;
			bottom: 30upx;
			font-size: 26upx;
			color: #999;
		}
	}


	// 商品详情
	.goods_detail {
		padding: 30upx;
		background-color: #fff;
		font-size: 36upx;

		.goods_detail_2 {
			font-size: 28upx;
			color: #999;
			margin: 12upx 0;
		}

		image {
			margin: 12upx 0 0;
			width: 100%;
		}
	}

	// 底部按钮
	.bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		padding: 10upx 30upx;
		background-color: #FFFFFF;
		display: flex;
		justify-content: space-between;
		align-items: flex-end;


		.bottom_left {
			flex: 1;
			display: flex;


			.relay,
			.customerService {
				flex: 1;
				padding: 10upx 15upx;
				font-size: 26upx;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				align-items: center;
				color: #999;

				image {
					width: 40upx;
					height: 40upx;
					margin-bottom: 10upx;
				}
			}
		}

		.bottom_right {
			width: 520upx;
			height: 100upx;
			line-height: 100upx;
			border-radius: 25upx;
			overflow: hidden;
			background: #FF2741;
			text-align: center;
			margin-left: 6upx;
			color: #fff;
			font-size: 30upx;
		}

		.bottom_right_end {
			width: 520upx;
			height: 100upx;
			line-height: 100upx;
			border-radius: 25upx;
			overflow: hidden;
			background: -webkit-linear-gradient(left, #777777 0%, #B8B8B8 100%);
			text-align: center;
			margin-left: 6upx;
			color: #fff;
			font-size: 30upx;
		}

	}

	// 规格弹窗
	.standard_content {
		width: 100%;
		background-color: #ffffff;
		border-top-left-radius: 20upx;
		border-top-right-radius: 20upx;
		padding: 50upx 30upx;
		box-sizing: border-box;
		position: relative;

		.erricon {
			font-size: 32upx;
			color: #999999;
			position: absolute;
			right: 20upx;
			top:37upx;
		}

		.product_info {
			display: flex;
			align-items: center;
		}

		.pro_pic {
			width: 184upx;
			height: 184upx;
			border-radius: 20upx;
			margin-right: 20upx;
		}

		.product_info_info {
			height: 184upx;
			display: flex;
			flex-direction: column;
			justify-content: center;
		}

		.price {
			font-size: 30upx;
			color: #FF2842;

			.price_line {
				font-size: 24upx;
				color: #666;
				text-decoration: line-through;
				margin-left: 10upx;
			}
			.price_flag{
				font-size: 24upx;
			}

		}

		.inventory {
			font-size: 24upx;
			color: #999999;
			line-height: 55upx;
		}

		.tochoose {
			font-size: 24upx;
			color: #333333;

			text {
				margin-left: 10upx;
			}
		}

		.weight {
			margin-top: 50upx;

			.tilte {
				font-size: 28upx;
				color: #000000;
				margin-bottom: 10upx;
			}

			.choose_weight {
				display: flex;
				white-space: nowrap;

				.product_weight {
					display: inline-block;
					height: 48upx;
					padding: 0 10upx;
					box-sizing: border-box;
					line-height: 48upx;
					font-size: 26upx;
					margin-right: 20upx;
					background-color: #f9f9f9;
					border-radius: 8upx;
					color: #333;
				}

				.product_weight_i {
					background-color: #f73e2f;
					color: #FFFFFF;
				}
			}

			.choose_weight_list {
				display: flex;
				flex-wrap: wrap;

				.product_weight {
					// width: 20%;
					padding:0 15upx;
					margin: 10upx;
					text-align: center;
					display: inline-block;
					height: 55upx;
					box-sizing: border-box;
					line-height: 55upx;
					font-size: 24upx;
					margin-right: 20upx;
					background-color: #f9f9f9;
					border-radius: 8upx;
					color: #333;
					border: 2upx solid #FFFFFF;
				}

				.product_weight_i {
					// background-color: #f73e2f;
					color: #f73e2f;
					border: 2upx solid #f73e2f;
					background: #FEF9FA;
				}

				.product_weight_n {
					background-color: #F9F9F9;
					color: #CCCCCC;
				}
			}

			.product_size {
				width: 28%;
				display: inline-block;
				height: 48upx;
				margin: 10upx;
				text-align: center;
				box-sizing: border-box;
				background-color: #f9f9f9;
				line-height: 48upx;
				font-size: 24upx;
				margin-right: 20upx;
				border-radius: 8upx;
				color: #333;
			}

			.product_size_i {
				background-color: #f73e2f;
				color: #FFFFFF;
			}
		}

		.btn {
			width: 100%;
			height: 90upx;
			background: #FF2741;
			border-radius: 4upx;
			margin-top: 56upx;
			font-size: 34upx;
			text-align: center;
			line-height: 90upx;
			color: #FFFFFF;
			border-radius: 25upx;
		}

		.buy_num {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 66upx 0;

			.title {
				font-size: 28upx;
				color: #000000;
				line-height: 40upx;

				text {
					font-size: 24upx;
					color: #b3b3b3;
				}
			}

			.num {
				display: flex;
				align-items: center;
				font-size: 28upx;
				color: #000000;
				line-height: 40upx;

				text {
					margin: 0 24upx;
				}

				image {
					width: 40upx;
					height: 40upx;
				}
			}
		}
	}

	// 分享弹窗
	.product_share {
		width: 100%;
		height: 340upx;
		background-color: #FFFFFF;
		border-top-left-radius: 20upx;
		border-top-right-radius: 20upx;
		position: relative;
		overflow: hidden;

		.erricon {
			font-size: 32upx;
			color: #999999;
			position: absolute;
			right: 30upx;
			top: 30upx;
		}
		
		.product_share_title {
			font-size: 32upx;
			color: #000000;
			text-align: center;
			margin-top: 30upx;
		}

		.product_share_way {
			width: 100%;
			padding: 0 100upx;
			margin-top: 50upx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-around;

			.product_share_way_item {
				text-align: center;

				image {
					width: 90upx;
					height: 90upx;
					display: block;
					margin: auto;
				}

				text {
					font-size: 28upx;
					color: #333333;
				}
			}

			.share-btn {
				margin: 0;
				padding: 0;
				background-color: #FFFFFF;
				border-radius: 0;
				line-height: 1.4;

				&::after {
					border: none;
				}
			}
		}
	}

	.sharebanner_bg {
		width: 600upx;
		height: 950upx;
		border-radius: 15upx;
		overflow: hidden;
		position: relative;

		image {
			width: 100%;
			height: 100%;

		}
	}

	.save_pic {
		width: 250upx;
		height: 80upx;
		box-sizing: border-box;
		font-size: 32upx;
		color: #FFFFFF;
		text-align: center;
		line-height: 80upx;
		border-radius: 40upx;
		margin: auto;
		margin-top: 30upx;
		background: #0390FD;
		display: flex;
		justify-content: center;
		align-items: center;

		image {
			margin-right: 10upx;
			width: 38upx;
			height: 34upx;
		}
	}

	// 拼团弹框
	.team {
		width: 100%;
		height: 680upx;
		background-color: #FFFFFF;
		border-top-left-radius: 20upx;
		border-top-right-radius: 20upx;
		position: relative;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 50upx 0;

		.erricon {
			font-size: 32upx;
			color: #999999;
			position: absolute;
			right: 30upx;
			top: 30upx;
			margin-bottom: 48upx;
			line-height: 32upx;
		}

		.team_one {
			font-size: 32upx;
			color: #333333;
			margin-bottom:25upx;
		}

		.team_product_title {
			font-size: 28upx;
			color: #999999;
			line-height:40upx;
			margin-bottom: 30upx;
		}

		.team_count_down {
			font-size: 32upx;
			color: #333333;
			margin: 10upx 0;
			margin-bottom: 20upx;
			display: flex;
			align-items: center;
		}

		.ream_residue_num {
			font-size: 24upx;
			color: #333333;
			margin-top: 60upx;
		}

		.makesure_group {
			width: calc(100% - 60upx);
			height: 90upx;
			margin: 0 auto 25upx;
			margin-top: 40upx;
			background: #FF2741;
			border-radius: 16upx;
			color: #FFFFFF;
			text-align: center;
			line-height: 82upx;
		}

		.makesure_group_no {
			width: calc(100% - 60upx);
			height: 90upx;
			margin: 0 auto 25upx;
			margin-top: 40upx;
			background: -webkit-linear-gradient(left, #777777 0%, #B8B8B8 100%);
			border-radius: 16upx;
			color: #FFFFFF;
			text-align: center;
			line-height: 82upx;
		}

		.team_user_header {
			display: flex;
			margin: auto;

			.scroll_pic {
				// width: 600upx;
				width: 750upx;
				height: 120upx;
				white-space: nowrap;
				margin: auto;
			}

			.header_pic {
				width: 108upx;
				height: 108upx;
				border-radius: 50%;
				box-sizing: border-box;
				display: inline-flex;
				align-items: center;
				justify-content: center;
				white-space: nowrap;
				margin: 5upx;

				image {
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}

				.query {
					width: 18upx;
					height: 27upx;
				}
			}

			.header_pic:first-child {

				border: none;
				background-color: #f73e2f;
				position: relative;

				.colonel {
					width: 82upx;
					height: 36upx;
					border-radius: 8upx;
					font-size: 24upx;
					color: #FFFFFF;
					text-align: center;
					line-height: 36upx;
					background: linear-gradient(to right, #f83008 0, #fa7968 100%);
					position: absolute;
					left: 50%;
					bottom: -10upx;
					transform: translate(-50%);
				}
			}
		}
	}

	//更多拼团列表的弹窗
	.group_list {
		width: 100%;
		height: 100vh;
		background-color: #FFFFFF;

		.erricon {
			font-size: 32upx;
			color: #999999;
			position: absolute;
			right: 20upx;
			top: 20upx;
			line-height: 32upx;
		}

		.list {
			padding-top: 50upx;
		}

	}

	.customer {
		position: relative;
		background-color: #fff;
		// width: calc(100% - 30upx);
		border-radius: 15upx;
		width: 564upx;
		height: 720upx;
		position: relative;
		overflow: hidden;

		.erricon {
			font-size: 32upx;
			color: #999999;
			position: absolute;
			right: 20upx;
			top: 20upx;
		}

		.banner_top {
			width: 100%;
			height: 220upx;
			background: #63C3A5;
			display: flex;
			justify-content: center;
			align-items: flex-end;

			image {
				width: 238upx;
				height: 176upx;
			}
		}

		.banner_bottom {
			padding: 0 50upx;

			.banner_code {
				display: flex;
				justify-content: center;
				align-items: center;
				margin: 20upx;

				image {
					width: 222upx;
					height: 222upx;
				}
			}

			.banner_tel {
				height: 68upx;
				background: #FF2842;
				color: #fff;
				font-size: 30upx;
				text-align: center;
				line-height: 68upx;
				border-radius: 35upx;
				margin: 0 10upx;
			}

			.banner_info {
				margin: 35upx auto 0;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 24upx;

				.weixin {
					color: #666;
				}

				.copy {
					margin-left: 10upx;
					color: #0390FD;

					image {
						width: 25upx;
						height: 23upx;
						vertical-align: middle;
					}
				}
			}

			.banner_time {
				color: #999;
				font-size: 24upx;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-top: 35upx;
			}
		}


	}
</style>
<style>
	page {
		background-color: #fff;
		min-height: 100vh;
	}
</style>
